<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>陈晓雨</title>
        <style type="text/css">
            body::before {
                background-image: url(./t047625ed6ab5d7fd61.jpg);
                background-size: cover;
                background-size: 100% 100%;
                background-attachment: fixed;
                min-height: 100vh;
                padding: 0px;
                margin: 0px;
                opacity: 0.6;
                z-index: -1; 
                background-position: center; 
                bottom: 0;
                right: 0;
                top: 0;
                left: 0;
                position: fixed;
                content: "";
            }
            
            span{
                display: inline-block;
            }
            .dg1{
                background-image: url(./t0140355350a2c8aac1.jpg);
                width: 100%;
                height: 10%;
                line-height: 10%;

            }
            .dg2,.dg3{
                display: inline-block;
                width: 200px;
                height: 50px;
                line-height: 50px;
            }
            .dg2{
                background-image: url(./t01ca9178a473a7b9d2.jpg);
                background-size: cover;
                opacity: 0.5; 
              
            }
            .dg3{
                background-color: aqua;
                border: 2px solid #000;
                box-shadow: 0 4px 20px rgba(0, 0, 0, 0.9);
            }
            .d1,.s2,.d2,.s3,.d3,.s4{
                background-color: #ecadad;
                width: 200px;
                height: 50px;
                margin: 20px;
                text-align: center;
                line-height: 50px;
            }
            .s1{
                background-color: #ecadad;
                width: 200px;
                height: 50px;  
                text-align: center;
                line-height: 50px;
            }
            .dg1 img{
                height: auto;
       
            }
        </style>
    </head>
    <body>
        <div class="dg1">
            <img src="./1.png">
            <img src="./2.png">
            <img src="./3.png">
            <img src="./4.png">
            <img src="./5.png">
            <img src="./6.png">
            <img src="./7.png">
        </div>
        <div class="dg2">第<a href="#">二个</a>DIV</div>
        <span class="s1">第一个span</span>
        <div class="dg3">第<a href="#">三个</a>DIV</div>
        <div class="d1">第<a href="#">四个</a>DIV <a href="https://www.baidu.com">百度</a></div>
        <span class="s2">第二个span</span>
        <div class="d2">第五个DIV <a href="https://www.baidu.com">百度</a></div>
        <span class="s3">第三个span</span>
        <div class="d3">第六个DIV <a href="https://www.baidu.com">百度</a></div> 
        <span class="s4">第四个span</span>
    </body>
</html>